<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title id="title"></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<!-- <script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript"  src="../js/echarts.min.js"></script> -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/dateMultiFunc.js"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
	</head>
	<body>
		<!-- 理化指标 -->
		<div id="tabs">
		  	<!-- 导航栏部分 -->
		  	<ul class="table">
		  		<li class="tabActive">第一季度<p></p></li>
		  		<li>第二季度<p></p></li>
		  		<li>第三季度<p></p></li>
		  		<li>第四季度<p></p></li>
		  	</ul>
			<div class="chartType">
				<span></span>
				<!-- <div>体重(kg)</div> -->
				<!-- <input type="date" id="dateSelect" /> -->
				<p onclick="dateMulti()" class="list_time">选择时间</p>
			</div>
			<div id="main"></div>
			
		  	<!-- 内容区域 -->
		  	<div class="content conAvtive">
				<div class="editData"></div>
				<div class="listRecord">
					<div class="listText1"></div>
					<div class="listInfor">
					</div>
				</div>	
				
			</div>
		  	<div class="content">
				<div class="editData"></div>
			</div>
		  	<div class="content">
				<div class="editData"></div>
			</div>
		  	<div class="content">
				<div class="editData"></div>
			</div>
		</div>
		<div class="bottom" onclick="goAdd()">
			<div class="submitContent" >添加记录</div>
		</div>
	</body>
	<script type="text/javascript">
		let requestPath = 'https://dyf-prod.dyzh120.com/';
		//let requestPath = 'https://dyf-test.dyzh120.com/';
		let chartType = '';//统计图上 名称
		let danwei = '';//统计图上 单位
		let tabText = '';
		let tabIndex = 1;
		let name = '';
		let mbTypeId = '';
		let patientId = '';
		//let editId = '';
		let startTime = null;
		let endTime = null;
	    // 时间范围
	    function dateMulti() {
			$('.bottom').hide();
	        var dateMulti = new dateMultiFunc({
	            type: 2,
	            maxTime: 0,
	            cancelFunc: function () {
					
	            },
	            confirmFunc: function (res) {
	                listCon(res, 2);
	            }
	        });
	        dateMulti.show();
	    };
		// 处理时间
		function listCon(res, type) {
		    var html = '';
		    if (type == 2) {
				startTime = res.statrTime.year+'-'+res.statrTime.month+'-'+res.statrTime.today;
				endTime = res.endTime.year+'-'+res.endTime.month+'-'+res.endTime.today;
		        html += "<p>"+startTime+" ~ "+endTime+"</p>";
		    } else {
		        for (var i = 0; i < res.length; i++) {
		            html += "<p>" + JSON.stringify(res[i]) + "</p>";
		        }
		    }
		    var list_con = document.querySelector(".list_time");
		    list_con.innerHTML = html;
			$(".conAvtive .editData").empty();
			$('.bottom').show();
			$(".chartType span").empty();
			$(".chartType span").append(chartType);
			getLog(null,mbTypeId,patientId);
			getList(null,mbTypeId,patientId);
			//$(".chartType span").append(chartType);
		};
		
		//解析请求地址
		function getQueryParams(url) {
			let params = {};
			let queryString = url ? url.split('?')[1] : window.location.search.slice(1);
			let arr = queryString.split('#')[0].split('&');
			for (let i = 0; i < arr.length; i++) {
				let a = arr[i].split('=');
				let paramName = a[0];
				let paramValue = typeof(a[1]) === 'undefined' ? true : decodeURIComponent(a[1].replace(/\+/g, ' '));
				
				if (params[paramName]) {
					if (Array.isArray(params[paramName])) {
						params[paramName].push(paramValue);
					} else {
						params[paramName] = [params[paramName], paramValue];
					}
				} else {
					params[paramName] = paramValue;
				}
			}
			return params;
		}
		$(function(){
			getUrlParam();
		});
		function goAdd(){
			wx.miniProgram.navigateTo({
				url: '/ncd_package/pages/indexNew/indexNew?mbTypeId='+mbTypeId+'&patientId='+patientId+'&name='+name
			});
		}
		
		// 获取URL参数
		function getUrlParam() {
			let url = window.location.href;
			let params = getQueryParams(url);
			name = params['name'];
			mbTypeId = params['mbTypeId'];
			patientId = params['patientId'];
			getList(tabIndex,mbTypeId,patientId);
			getLog(tabIndex,mbTypeId,patientId);
			let title = '';//页面头部名称
			let infor = '';//统计图下 文字描述
			let listText1 = '';//统计图下 文字标题
			if(mbTypeId == 3){
				title = '糖化血红蛋白';
				chartType = '糖化血红蛋白';
				danwei = '（%）';
				listText1 += '关于糖化血红蛋白指标'
				infor += '糖化血红蛋白指标主要用于评估过去8~12周(2-3个月)内的平均血糖水平，是糖尿病诊断、治疗以及长期血糖控制情况评估的重要指标。 <br>'+
						'>4.0%为偏低，提示糖化血红蛋白偏低，一般见于频发低血糖或者各种原因引起的贫血等；<br>'+
						'>6.0%为偏高，提示血糖偏高（≥6.5%提示可能患有糖尿病）；<br>'+
						'≥9%对于糖尿病患者属于启动胰岛素治疗的指征，需警惕急、慢性并发症风险。'
			}
			if(mbTypeId == 4){
				title = '甘油三酯';
				chartType = '甘油三酯';
				danwei = '（mmol/L）';
				listText1 += '关于甘油三酯指标'
				infor += '甘油三酯指标对于评估个体的血脂状况具有重要意义，因为甘油三酯增高与冠心病、原发性高脂血症、动脉粥样硬化症等多种疾病密切相关。因此，保持甘油三酯在正常范围内对于维护心血管健康至关重要。<br>'+
						'≥1.7且<2.3 mmol/L为边缘升高，提示存在健康风险，需要考虑偏高因素，调整饮食及生活方式等；<br>'+
						'≥2.3mmol/L为升高，提示存在心脑血管等疾病风险，需要在专业医生的指导下及时干预治疗。<br>'
			}
			if(mbTypeId == 5){
				title = '总胆固醇';
				chartType = '总胆固醇';
				danwei = '（mmol/L）';
				listText1 += '关于总胆固醇指标'
				infor += '总胆固醇是指血液中所有脂蛋白所含胆固醇之总和。反映整体胆固醇的水平，过高则会增加动脉粥样硬化风险。'		
			}
			if(mbTypeId == 6){
				title = '高密度脂蛋白胆固醇';
				chartType = '高密度脂蛋白胆固醇';
				danwei = '（mmol/L）';
				listText1 += '关于高密度脂蛋白胆固醇指标'
				infor += '高密度脂蛋白胆固醇，俗称“好胆固醇”，是血液中密度最高、颗粒最小的的脂蛋白，高密度脂蛋白负责把斑块内的胆固醇运输至肝脏进行分解代谢，即胆固醇逆转运，减少胆固醇在血管壁的沉积，起到抗动脉硬化作用。'		
			}
			if(mbTypeId == 7){
				title = '低密度脂蛋白胆固醇';
				chartType = '低密度脂蛋白胆固醇';
				danwei = '（mmol/L）';
				listText1 += '关于低密度脂蛋白胆固醇指标'
				infor += 'LDL - C 水平是防治动脉粥样硬化的重要策略之一，也是血脂异常防治的首要目标。<br>'+
						'健康人群＜3.4mmol/L<br>'+
						'中风险人群<2.6mmol/L<br>'+
						'高风险人群<1.8mmol/L<br>'+
						'极高危人群<1.4mmol/L'		
			}
			$(".chartType span").append(chartType + danwei);
			$(".listInfor").append(infor);
			$(".listText1").append(listText1)
			$("#title").append(title)
		}
		$(".table li").on("click", function() {
			var divs = $(".content")
			var lis = $(".table li")
			lis.removeClass('tabActive')
			$(this).addClass('tabActive')
			for (var i = 0; i < lis.length; i ++) {
				if (lis[i] == this) {
					divs.removeClass('conAvtive')
					divs.eq(i).addClass('conAvtive')
				}
			}
			tabText = $(".table li.tabActive").text()
			startTime = null;
			endTime = null;
			$(".list_time").html('选择时间')
			if(tabText != '第一季度'){
				tabIndex = $(this).index()+1;
				getLog(tabIndex,mbTypeId,patientId);
				getList(tabIndex,mbTypeId,patientId);
				$('.bottom').hide();
			}else{
				getLog(1,mbTypeId,patientId);
				getList(1,mbTypeId,patientId);
				$('.bottom').show();
			}
		})
		
		//最近一次添加的记录返回 
		function getLog(jidu,mbTypeId,patientId){
			
			let ulHtml = '';
			$.ajax({
				url:requestPath+'api/v1/mbData/queryLogLh',
				contentType: 'application/json; charset=utf-8',
				type:'post',
				data:JSON.stringify({mbTypeId:mbTypeId,patientId:patientId,quarterType:jidu,startTime:startTime,endTime:endTime}),
				success: function(response) {
					if(response.result.length == 0){
						$(".editData").hide();
					}else{
						response.result.forEach(function(item, index) {
							let remark = ''
							if(item.remark == '' || item.remark == null){
								remark = ''
							}else{
								remark = '('+item.remark +')'
							}
							$(".conAvtive .editData").empty();
							if(item.mbTypeId == 3){
								ulHtml += '<div class="editList"onclick="goEdit(\''+item.id+'\')"><div>' + item.measureTime+'&nbsp;'+item.time+remark+'</div>'+
										'<div><b>'+ item.hba1c +'</b> %</div></div>'
							}
							if(item.mbTypeId == 4){
								ulHtml += '<div class="editList" onclick="goEdit(\''+item.id+'\')"><div>' + item.measureTime+'&nbsp;'+item.time+remark+'</div>'+
										'<div><b>'+ item.tg +'</b> mmol/L</div></div>'
							}
							if(item.mbTypeId == 5){
								ulHtml += '<div class="editList" onclick="goEdit(\''+item.id+'\')"><div>' + item.measureTime+'&nbsp;'+item.time+remark+'</div>'+
										'<div><b>'+ item.tc +'</b> mmol/L</div></div>'
							}
							if(item.mbTypeId == 6){
								ulHtml += '<div class="editList" onclick="goEdit(\''+item.id+'\')"><div>' + item.measureTime+'&nbsp;'+item.time+remark+'</div>'+
										'<div><b>'+ item.hdlC +'</b> mmol/L</div></div>'
							}
							if(item.mbTypeId == 7){
								ulHtml += '<div class="editList" onclick="goEdit(\''+item.id+'\')"><div>' + item.measureTime+'&nbsp;'+item.time+remark+'</div>'+
										'<div><b>'+ item.ldlC +'</b> mmol/L</div></div>'	
							}
							$(".conAvtive .editData").show();
							$(".conAvtive .editData").append(ulHtml);
						});
					}
				}
			})
		}
		//跳转小程序 编辑页面
		function goEdit(id){
			console.log('2',id)
			wx.miniProgram.navigateTo({
				url: '/ncd_package/pages/indexNew/indexNew?mbTypeId='+mbTypeId+'&patientId='+patientId+'&name='+name+'&id='+id
			});
		}
		function getList(type,mbTypeId,patientId){
		    $.ajax({
				url: requestPath+'api/v1/mbData/queryTjByType',
				contentType: 'application/json; charset=utf-8',
				type:'post',
				data:JSON.stringify({mbTypeId:mbTypeId,patientId:patientId,quarterType:type,startTime:startTime,endTime:endTime}),
				success: function(response) {
					// if(tabText != '第一季度'){
					// 	$('.bottom').hide();
					// }else{
					// 	$('.bottom').show();
					// }
					let resData = response.result.data.map(parseFloat);
					let item = {}
					let newData = []
					let restime = []
					let restime1 = []
					let newSeries = []
					let newTooltip = {}
					let yMax = 0
					if(response.result.time.length == 0){
						//restime = response.result.categories
						restime1 = ["3", "6", "9", "12"]
					}else{
						if(type === 0){
							restime = response.result.time
							$.each(restime, function(index, value) {
								restime1[index] = value.substring(10, 16); // 使用substring截取字符串
							});
						}else{
							restime1 = response.result.categories
						}
					}
					if(mbTypeId == '3' || mbTypeId == 3){
						yMax = 10
					}else if(mbTypeId == '4' || mbTypeId == 4){
						yMax = 12
					}else if(mbTypeId == '5' || mbTypeId == 5){
						yMax = 20
					}else if(mbTypeId == '6' || mbTypeId == 6){
						yMax = 10
					}else if(mbTypeId == '7' || mbTypeId == 7){
						yMax = 10
					}
					resData.forEach(function(val, index) {
						if(val > response.result.biaozhun){
							item = {value: val,date:response.result.date,time:restime[index],daiwei:response.result.danwei,itemStyle: {color: '#FC2249 '}}
						}else{                 
							item = {value: val,date:response.result.date,time:restime[index],daiwei:response.result.danwei,itemStyle: {color: '#07C160'}}
						}
						newData.push(item)
					});
					newSeries = [{
					    data:newData,
					    type: 'line',
						symbol: 'circle', // 设置圆点为实心
						smooth: true,
						connectNulls: false,
					    symbolSize:10,// 点的大小
						roam:false,
						label: {
							show: true,
							position: 'top'
						}
					}]
					newTooltip = {
						show: true,
						trigger: 'item',
						formatter: function(params) {
							response.result.time.forEach(function(item, index) {
								let newIndex =  params.dataIndex
								params.typeName = chartType
								params.danwei = response.result.danwei
								params.dataName = response.result.time[newIndex]
							});
							if(params.value > response.result.biaozhun){
								return `<div class="tool" style="background: #FC2249"><p>${params.typeName}<p><p>${params.dataName}</p><p><strong style="font-size:18px"> ${params.value} </strong> ${params.danwei}</p></div>`;
							}else{
								return `<div class="tool" style="background: #07C160"><p>${params.typeName}<p><p>${params.dataName}</p><p><strong style="font-size:18px"> ${params.value} </strong> ${params.danwei}</p></div>`;
							} 
						},
						renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
						backgroundColor:'none', // 提示框浮层的背景颜色。
						borderColor: 'none', // 提示框浮层的边框颜色。
						borderWidth: 0, // 提示框浮层的边框宽。
						padding:0, // 提示框浮层内边距，
						showDelay: 0,
						enterable: false,
						renderMode: 'html',
						textStyle: {
							fontSize:16  // 设置提示框内字体大小
						}
					}
					var myChart = echarts.init(document.getElementById('main'));
					 
					// 指定图表的配置项和数据
					var option = {
						grid: {
							left: '1%',    // 图表左侧与容器边缘的间距为容器宽度的3%
							right: '5%',   // 图表右侧与容器边缘的间距为容器宽度的4%
							top: '8%',    // 图表顶部与容器边缘的间距为容器高度的10%
							bottom: '5%', // 图表底部与容器边缘的间距为容器高度的10%
							containLabel: true // 是否包含坐标轴的刻度标签
						},
					    xAxis: {
					        type:'category',
							boundaryGap: false,
					        data: restime1,
							axisLabel: {
								alignWithLabel: true,
								textStyle: {
									fontSize:14  // 设置X轴标签字体大小
								}
							}
					    },
					    yAxis: {
					        type: 'value',
							min:0,
							max:yMax,
							axisLabel: {
								textStyle: {
									fontSize:14  // 设置X轴标签字体大小
								}
							},
							splitLine: {
								show: false // 关闭背景线
							}
					    },
						tooltip:newTooltip,
					    series: newSeries
					};
					 
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option)
		      },
		      error: function(xhr, status, error) {
		        // 处理错误
		      }
		    });
		};
		//获取平均值数据
		function getAvg(type,mbTypeId,patientId){
			let ulHtml = '';
			$.ajax({
				url:requestPath+'api/v1/mbData/queryJzDataByType',
				contentType: 'application/json; charset=utf-8',
				type:'post',
				data:JSON.stringify({mbTypeId:mbTypeId,patientId:patientId,quarterType:type}),
				success: function(response) {
					var result = response.result
					if(result.max == null || result.max == '' || result.max == 'null'){
						result.max = ''
						result.min = ''
					}
					ulHtml += '<div class="listRecord">'+
							'<div class="listInfordiv">'+
								'<div class="listText">'+$(".table li.tabActive").text()+'记录</div>'+
							'</div>'+
							'<div class="listNum">'+
								'<div class="listTime">最小</div>'+
								'<div class="listB"><b class="listNumL">'+result.min+'</b>'+result.danwei+'</div>'+
							'</div>'+
							'<div class="line"></div>'+
							'<div class="listNum">'+
								'<div class="listTime">最大</div>'+
								'<div class="listB"><b class="listNumL">'+result.max+'</b>'+result.danwei+'</div>'+
							'</div>'+
						'</div>'
					$(".conAvtive").append(ulHtml);
				}
			})
		}
	</script>
<style>
	*{margin:0;padding:0;}
	body{
		background-color: #F7F8FA;
		font-family:PingFang, Arial,'Microsoft YaHei', '微软雅黑';
	}
	.table {
		width:100%;
		height:48px;
		display: flex;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index:999;
	}
	.table li {
		width: 25%;
		text-align: center;
		list-style: none;
		cursor: pointer;
		font-weight:bold;
		font-size:14px;
		color:#19191A;
		line-height:48px;
		float: left;
		text-align:center;
	}
	.table li.tabActive {
		color: #1971ff;
	}
	.tabActive p{
		width:28px;
		height:2px;
		background:#1971ff;
		margin:-2px auto 0;
	}
	.chartType{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
		font-weight: 600;
		font-size:16px;
		color: #19191A;
		line-height:40px;
		margin:50px 10px 0 10px;
	}
	.chartType input{
		float:right;
		font-size: 14px;
		background: #FFFFFF;
		border-radius:4px;
		border:1px solid #DCDEE0;
		text-align: left;
		font-family: PingFang SC,PingFang SC;
		font-weight: 400;
		color: #323233;
		height: 30px;
		padding:0 10px;
	}
	#main{
		width:calc(100% - 20px);
		height:280px;
		background:#fff;
		border-radius:5px;
		margin: 0 10px;
	}
	/* 图表下面 */
	.content {
		display: none;
		margin-bottom:200px;
	}
	.conAvtive {
		width:calc(100% - 20px);
		margin:10px;
		display: block;
		margin-bottom:100px;
	}
	.content .listRecord:nth-child(2){
		//display: none;
	}
	.listRecord{
		width:calc(100% - 20px);
		background: #FFF;
		border-radius:5px;
		padding:10px;
		margin-top:10px;
	}
	.listInfor{
		width:100%;
		font-size:16px;
		line-height:32px;
		word-break: break-all;
		white-space: normal;
	}
	.editData{
		width: calc(100% - 20px);
		border-radius:5px;
		padding:0 10px;
		font-family: PingFang SC, PingFang SC;
		font-size:16px;
		color: #19191A;
		line-height:24px;
		background:#fff;
		margin-top:10px;
		margin-bottom: 10px;
		font-weight: 500;
	}
	.editData .editList{
		width:100%;
		border-radius:5px;
		padding:10px 0;
		font-size:16px;
		color: #19191A;
		line-height:24px;
		margin-bottom: 10px;
		font-weight: 500;
		display: flex;
		justify-content: space-between;
		border-bottom:1px solid #DCDEE0;
	}
	.editData .editList:last-child{
		border-bottom:none;
		margin-bottom:0;
	}
	/* 图表下面的描述 */
	.listText1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight:1000;
		font-size:16px;
		color: #19191A;
		margin-bottom:5px;
	}
	.listInforView{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
	.listText {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight:1000;
		font-size:16px;
		color: #19191A;
		height:40px;
		line-height:40px;
	}
	/* 年度记录 */
	.listNum{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.line{
		width:100%;
		height:1px;
		margin:5px 0;
		background-color: #E3E4E6;
	}
	.listTime{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size:14px;
		color: #000000;
		height:40px;
	}
	.listNumL{
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size:16px;
		color: #000000;
		line-height:45px;
		height:40px;
		margin-right:5px
	}
	.listB{
		display: flex;
		font-size:14px;
		color: #000000;
		line-height:50px;
		height:40px;
	}
	/* 图标提示 */
	.tool{
		padding:10px 15px;
		border-radius:5px;
	}
	.tool p{
		line-height:22px;
	}
	.bottom{
		width:100%;
		position: fixed;
		left: 0;
		bottom:0;
		right: 0;
		padding-bottom:10px;
		z-index:9999;
		background-color: #FFF;
	}
	.submitContent {
		background-color: #1971FF;
		display: flex;
		height:40px;
		width:calc(100% - 60px);
		font-size:14px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 40px;
		justify-content: center;
		align-items: center;
		border-radius:5px;
		text-align: center;
		margin:10px auto;
	}
	</style>
</html>